<script>
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'
import { Menu } from '@logicflow/extension'
import TagNoChart from './tagNo-chart.vue'
// import http from '@/utils/http'
import http from '@/packages/utils/http'
import {
  registerArrow,
  registerCircle,
  registerCline,
  registerCondition,
  registerCustomLine,
  registerFont,
  registerLiqlev,
  registerPump,
  registerQx,
  registerStorageTank,
  registerTag,
  registerNewTag,
  registerText,
  registerZjzx,
  registerZx
} from '@/packages/lowCode/components/charts/CisCraftEmpty/registerNode'
LogicFlow.use(Menu)
export default {
  name: 'CisFlow',
  components: {
    TagNoChart
  },
  props: {
    graphData: Object,
    id: String,
    preViewUrl:String
  },
  data() {
    return {
      lf: null,
      config: {
        isSilentMode: true,
        background: {
          color: '#f7f9ff'
        }
      },
      timer: null,
      isExpand: true,
      tagNo: '',
    }
  },
  mounted() {},
  methods: {
    init() {
      this.$nextTick(() => {
        this.initFlow()
      })
    },
    initFlow() {
      if (this.graphData.otherParams.bgColor) {
        this.config.background.color = this.graphData.otherParams.bgColor
      }
      console.log(this.config)
      // logicflow 初始配置
      const lfInstance = new LogicFlow({
        ...this.config,
        container: this.$refs['LF-preview']
      })
      this.lf = lfInstance
      this.lf.setMenuConfig({
        nodeMenu: []
      })
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const _that = this
      this.lf.addMenuConfig({
        nodeMenu: [
          {
            text: '位号趋势图',
            callback(node) {
              _that.$refs.tagNoChart.init()
               _that.$refs["tagNoChart"].dataForm.tagNo =
                node.properties.tagString;
            }
          }
        ]
      })
      registerFont(this.lf)
      registerTag(this.lf)
      registerNewTag(this.lf)
      registerText(this.lf)
      registerCline(this.lf)
      registerQx(this.lf)
      registerZjzx(this.lf)
      registerZx(this.lf)
      registerCondition(this.lf)
      registerPump(this.lf)
      registerLiqlev(this.lf)
      registerArrow(this.lf)
      registerCustomLine(this.lf)
      registerCircle(this.lf)
      for (let i = 1; i < 39; i++) {
        registerStorageTank(this.lf, `storageTank${i}`)
      }
      for (let i = 1; i < 24; i++) {
        registerStorageTank(this.lf, `valve${i}`)
      }
      for (let i = 1; i < 72; i++) {
        registerStorageTank(this.lf, `equipment${i}`)
      }
      for (let i = 1; i < 32; i++) {
        registerStorageTank(this.lf, `fan${i}`)
      }
      for (let i = 1; i < 23; i++) {
        registerStorageTank(this.lf, `building${i}`)
      }
      for (let i = 1; i < 36; i++) {
        registerStorageTank(this.lf, `boiler${i}`)
      }
      for (let i = 1; i < 27; i++) {
        registerStorageTank(this.lf, `industrial${i}`)
      }
      for (let i = 1; i < 14; i++) {
        registerStorageTank(this.lf, `atmoVa${i}`)
      }
      for (let i = 1; i < 19; i++) {
        registerStorageTank(this.lf, `valvetwo${i}`)
      }
      this.lf.render(this.graphData)
      // this.lf.fitView();
      this.refreshData()
    },
    refreshData() {
      this.getData()
      if (this.graphData.otherParams.refresh) {
        this.timer = setInterval(
          () => this.getData(),
          this.graphData.otherParams.refreshTime * 1000
        )
      }
    },
    destroyed() {
      clearInterval(this.timer)
    },
    setData() {
      let tagList = this.graphData.nodes.filter((e) => {
        let reg = /^tag|^newTag|^condition|^liqlev|^pump/;
        return reg.test(e.type) && e.properties;
      });
      return tagList;
    },
    getData() {
      let list = this.setData();
      let tagList = [];
      list.map((e) => {
        if (e.type == "newTag") {
          if (e.properties.tagText) {
            tagList.push({
              TagName: e.properties.tagText,
              Type: e.type,
            });
          }
          if (e.properties.tagText2) {
            tagList.push({
              TagName: e.properties.tagText2,
              Type: e.type,
            });
          }
          if (e.properties.tagText3) {
            tagList.push({
              TagName: e.properties.tagText3,
              Type: e.type,
            });
          }
        } else {
          if (e.properties.tagString) {
            tagList.push({
              TagName: e.properties.tagString,
              Type: e.type,
            });
          }
        }
      });
      http
        .post(this.preViewUrl, {
          TagListInfo: JSON.stringify(tagList),
          id: this.id,
        })
        .then(({ data: res }) => {
          if (res.errorcode == 0) {
            list.map((e) => {
              for (let i = 0; i < res.result.length + 1; i++) {
                if (e.type == "newTag") {
                  if (i == res.result.length) return;
                  if (
                    e.properties.tagText == (res.result[i].tagName || "") &&
                    e.properties.tagText2 == (res.result[i].tagName2 || "") &&
                    e.properties.tagText3 == (res.result[i].tagName3 || "")
                  ) {
                    let items = { ...e, ...res.result[i] };
                    this.lf.setProperties(e.id, {
                      tagReal: items.momentValue && Number(items.momentValue).toFixed(1) || 0,
                      tagBefore: items.inValue && Number(items.inValue).toFixed(1) || 0,
                      tagAfter: items.outValue && Number(items.outValue).toFixed(1) || 0,
                    });
                    this.lf.getNodeModel(e.id).updateAttributes({
                      tagReal: items.momentValue && Number(items.momentValue).toFixed(1) || 0,
                      tagBefore: items.inValue && Number(items.inValue).toFixed(1) || 0,
                      tagAfter: items.outValue && Number(items.outValue).toFixed(1) || 0,
                    });
                  }
                }
                if (e.properties.tagString == res.result[i].tagName) {
                  let item = { ...e, ...res.result[i] };
                  if (e.type == "tag") {
                    this.lf.setProperties(e.id, {
                      tagBefore: item.inValue,
                      tagAfter: item.outValue,
                    });
                    this.lf.getNodeModel(e.id).updateAttributes({
                      tagBefore: item.inValue,
                      tagAfter: item.outValue,
                    });
                  } else if (e.type == "pump") {
                    this.lf.setProperties(e.id, {
                      status: item.inValue > 50 ? true : false,
                    });
                    this.lf.getNodeModel(e.id).updateAttributes({
                      status: item.inValue > 50 ? true : false,
                    });
                  } else if (e.type == "condition") {
                    this.lf.setProperties(e.id, {
                      status: item.inValue > 50 ? true : false,
                    });
                    this.lf.getNodeModel(e.id).updateAttributes({
                      status: item.inValue > 50 ? true : false,
                    });
                  } else if (e.type == "liqlev") {
                    this.lf.setProperties(e.id, {
                      levNum: item.inValue,
                    });
                    this.lf.getNodeModel(e.id).updateAttributes({
                      levNum: item.inValue,
                    });
                  }
                  break;
                }
              }
            });
          }
        });
    },
  }
}
</script>

<template>
  <div class="flow-pre">
    <div id="LF-preview" ref="LF-preview"></div>
    <!-- <div class="flow-right" :style="`width:${isExpand ? 600 : 0}px`">
      <slot name="table"></slot>
    </div>
    <div class="flow-switch" :style="`right:${isExpand ? 575 :20}px`" @click="() => (this.isExpand = !isExpand)">
      <div v-if="isExpand" class="el-icon-d-arrow-right"></div>
      <div v-else class="el-icon-d-arrow-left"></div>
    </div> -->
    <TagNoChart ref="tagNoChart"></TagNoChart>
  </div>
</template>

<style lang="scss" scoped>
.flow-pre {
  position: relative;
  height: calc(100vh - 130px);
  #LF-preview {
    height: 100%;
    background-color: #f2f2f2;
  }
  .flow-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: -2px 0px 15px #d3d3d3;
    background-color: #ffffff;
    z-index: 999;
    padding: 25px 25px 25px 40px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .flow-switch {
    position: absolute;
    top: 50%;
    z-index: 1000;
    font-size: 20px;
  }
}
</style>
